<template>
  <div >
    <el-dialog title="详细信息" top="8vh" class="saleMarketRight dialogHeaderFont" append-to-body :visible.sync="dialogVisible" width="100%">
      <div>
        <div class="itemContainer">
          <div class="itemTitle">销售情况</div>
          <div id="saleDetailSummaryChartS" style="height: 300px"></div>
        </div>
        <div class="itemContainer" style="margin-bottom: 0;margin-bottom: 0">
          <div class="titleHeader space-between saleMarketRight">
            <span style="font-weight: bold">销售渠道分布</span>
            <el-form :inline="true" class="demo-form-inline single-form-inline locationDetail pickerOption" size="small">
              <el-form-item label="地区">
                <el-select v-model="country" placeholder="选择地区" @change="channelSel">
                  <el-option v-for="(item,index) in area" :key="index" :label="item" :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="省份">
                <el-select v-model="province" placeholder="选择省份" @change="channelSel">
                  <el-option v-for="(item,index) in provinceList" :key="index" :label="item" :value="item" ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="城市">
                <el-select v-model="city" placeholder="选择城市" @change="channelSel">
                  <el-option v-for="(item,index) in cityLists" :key="index" :label="item" :value="item" ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="门店">
                <el-select v-model="shop" placeholder="选择门店" @change="channelSel">
                  <el-option v-for="(item,index) in shopLists" :key="index" :label="item" :value="item" ></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
          <div id="salePointChartS" style="height: 300px"></div>
        </div>
        <div v-if="shopIsAll" class="priceDetail">
          <div class="">
            <div class="itemTitle">
              <span>终端销售统计</span>
            </div>
            <el-table :data="priceTableData" style="width: 100%" size="mini">
              <el-table-column
                prop="shopName"
                label="门店名称">
              </el-table-column>
              <el-table-column
                sortable
                prop="amountCount"
                label="销售额(万元)">
              </el-table-column>
              <el-table-column
                sortable
                prop="salesCount"
                label="销售量(万件)">
              </el-table-column>
              <el-table-column
                prop="zhanBi"
                sortable
                label="销量在全品类中占比">
              </el-table-column>
            </el-table>
          </div>
          <div class="">
            <div class="itemTitle">
              <span>渠道表现趋势</span>
            </div>
            <div id="salePriceChartS" style="height: 300px"></div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import mixins from 'utils/mixin'

  export default {
    name: "product-detail",
    mixins:[mixins.mixin],
    props:['productCode'],
    data(){
      return{
        dialogVisible: false,
        priceTableData:[],
        shopIsAll: true
      }
    },
    mounted(){},
    watch:{
      shop(newVal){
        if("全部" == newVal){
          this.priceTableData = []
          this.shopIsAll = true
        }else {
          this.shopIsAll = false
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .priceDetail {
    display: flex;
    background-color: #fff;
    padding: 10px;
    > div {
      flex: 1;
      flex-basis: 50%;
      margin: 10px;
    }
  }
  #saleDetailSummaryChartS{
    background-color: #ffffff;
  }
  .itemContainer {
    background-color: white;
    padding: 10px;
    margin-bottom: 10px;
  }
  .itemTitle {
    background-color: #E8EEF4;
    height: 40px;
    padding: 0px 12px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
  }
</style>
